<template>
  <div id="app">
    <transition :name="transitionName">
      <!-- 所有通过router-view加载的组件都会缓存 -->
      <keep-alive :include="virtualTaskStack">
        <router-view/>
      </keep-alive>
    </transition>
  </div>
</template>

<script>

export default {
  data() {
    return {
      transitionName: 'fold-left',
      //虚拟任务栈
      virtualTaskStack:[
        'mymain'
      ]
    }
  },
  //检测路由
  watch: {
    '$route'(to) {
      const routerType=to.params.routerType;
      if(routerType==='push'){
        //进入新页面的时候保存新页面的缓存
        this.virtualTaskStack.push(to.name);
        //跳转打开
        this.transitionName='fold-left';
      }else{
        this.virtualTaskStack.pop();
        //后退
        this.transitionName='fold-right';
      }
      /**
       * 初始化的缓存
       */
      if(to.params.clearTask){
        this.virtualTaskStack=['mymain']  
      }
    }
  },
}
</script>

<style lang="scss">
@import '@css/style.scss';
#app{
  width: 100%;
  height: 100%;
}

//动画css 横向移动
//这里是跳转的时候当前页面从右到左隐藏，跳转页面从隐藏到显示
.fold-left-enter-active{
  animation-name:fold-left-in;
  animation-duration: .4s;
}
@keyframes fold-left-in {
  0%{
    transform: translate(100%,0);
  }
  100%{
    transform: translate(0,0);
  }
}
.fold-left-leave-active{
  animation-name:fold-left-out;
  animation-duration: .4s;
}
@keyframes fold-left-out {
  0%{
    transform: translate(0,0);
  }
  100%{
    transform: translate(-100%,0);
  }
}
.fold-right-enter-active{
  animation-name:fold-right-in;
  animation-duration: .4s;
}
//后退时候 从左到右显示隐藏的页面，显示的页面从左到右隐藏
@keyframes fold-right-in {
  0%{
    transform: translate(-100%,0);
  }
  100%{
    transform: translate(0,0);
  }
}
.fold-right-leave-active{
  animation-name:fold-right-out;
  animation-duration: .4s;
}
@keyframes fold-right-out {
  0%{
    transform: translate(0,0);
  }
  100%{
    transform: translate(100%,0);
  }
}
</style>
